import { defineComponent } from "vue";
import "./index.less";

export const MySearchSubmitButton = defineComponent({
    props: {
        title: String,
        className: String,
    },
    setup(props) {
        return () => (
            <a-button class={props.className} type="primary" html-type="submit">
                <my-icon class="btn-icon" icon="search" color="#FFF" />
                {props.title || "搜索"}
            </a-button>
        );
    },
});

export const MyCreateButton = defineComponent({
    props: {
        title: String,
        className: String,
        iconColor: String,
    },
    setup(props) {
        return () => (
            <a-button class={[props.className, "fromBtn_ml10"]} type="primary">
                <my-icon
                    class="btn-icon"
                    icon="add-four"
                    color={props.iconColor}
                />
                {props.title || "添加"}
            </a-button>
        );
    },
});

export const MyEditButton = defineComponent({
    props: {
        title: String,
        className: String,
        type: {
            type: String,
            default: "primary",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    setup(props) {
        return () => (
            <a-button
                class={[props.className, "fromBtn_ml10"]}
                type={props.type}
                disabled={props.disabled}
            >
                <my-icon class="btn-icon" icon="editor" color="#FFF" />
                {props.title || "编辑"}
            </a-button>
        );
    },
});

export const MyDeleteButton = defineComponent({
    props: {
        popTitle: String,
        title: String,
        className: String,
        type: {
            type: String,
            default: "danger",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        icon: {
            type: String,
            defualt: "delete",
        },
    },
    setup(props) {
        return () => (
            <a-popconfirm
                title={props.popTitle}
                disabled={props.disabled}
                ok-text="是"
                cancel-text="否"
            >
                <a-button
                    class={[props.className, "fromBtn_ml10"]}
                    type={"primary"}
                    danger
                    disabled={props.disabled}
                >
                    <my-icon class="btn-icon" icon={props.icon} color="#FFF" />
                    {props.title || "删除"}
                </a-button>
            </a-popconfirm>
        );
    },
});

export const MyResetButton = defineComponent({
    props: {
        popTitle: String,
        title: String,
        className: String,
        type: {
            type: String,
            default: "default",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    setup(props) {
        return () => (
            <a-button
                class={[props.className]}
                type={props.type}
                disabled={props.disabled}
            >
                <my-icon class="btn-icon" icon="refresh" color="#666" />
                {props.title || "重置"}
            </a-button>
        );
    },
});

// 自定义按钮
export const MyCustomButton = defineComponent({
    props: {
        popTitle: String,
        title: String,
        className: String,
        type: {
            type: String,
            default: "danger",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        icon: {
            type: String,
            defualt: "delete",
        },
        iconColor: String,
        size: String,
    },
    setup(props) {
        return () => (
            <a-button
                class={[props.className]}
                type={props.type}
                disabled={props.disabled}
                size={props.size || "large"}
            >
                <my-icon
                    class="btn-icon"
                    icon={props.icon || "like"}
                    color={props.iconColor || "#fff"}
                />
                {props.title || "自自定义"}
            </a-button>
        );
    },
});
